<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="./style/style.css">
    <script src="./js/src/jquery-3.2.1.min.js"></script>
    <script src="./js/src/jquery.mousewheel.js"></script>
    <script src="./js/src/TweenMax.min.js"></script>
    <script src="./js/main.js"></script>
</head>

<body class="">
    <!-- 固定的导航部分 start-->
    <div class="menu_wrapper">
        <div class="menu">
            <div class="content">
                <a href="#" class="logo"></a>
                <ul class="nav">
                    <li><a href="">ABOUT</a></li>
                    <li><a href="">THE TEAM</a></li>
                    <li><a href="">RESULTS</a></li>
                </ul>
                <div class="language">
                    <div class="select"><span>en</span></div>
                    <div class="dropdown" style="display: none; opacity: 0;">
                        <a class="item" href="en" style="opacity: 1;"><span>en</span></a>
                        <a class="item" href="es" style="opacity: 1;"><span>es</span></a>
                    </div>
                </div>
                <div class="line"></div>
            </div>
            <a href="#" class="start">
                <div class="state state1">
                    <span>Start diagnosis for $100</span>
                </div>
                 <div class="state state2">
                    <span>Start diagnosis for $100</span>
                </div>
            </a>
            <div class="btn_mobile"></div>
        </div>
    </div>
    <!-- 固定的导航部分 end-->
    <!-- 左侧导航 start -->
    <div class="left_nav">
        <div class="l_close"></div>
        <img src="./images/scene1/logo_menu_mobile.png" class="l_logo" />
        <a href="#" class="btn1 l_link">Start diagnosis for $100</a>
        <a href="#" class="btn2 l_link">About</a>
        <a href="#" class="btn3 l_link">The team</a>
        <a href="#" class="btn4 l_link">Results</a>
    </div>
    <!-- 左侧导航 end -->
    <!-- 主体部分 start-->
    <div class="wrapper">
        <!-- 主体 第一块内容 start -->
        <div class="scene scene1">
            <div class="middle_box"></div>
            <img class="light" src="./images/scene1/ligth_green.png" alt="">
            <img class="scene1_logo" src="./images/scene1/logo_scene1.png" alt="">
            <img class="light_left" src="./images/scene1/light_left.png" alt="">
            <img class="light_right" src="./images/scene1/light_right.png" alt="">

            <div class="scene1_1 center_align_1">
                <div class="center_align_2">
                    <p>
                        <img class="desk_img center_img_1" src="./images/scene1/scena1_center1.png" alt=""><br/>
                        <img class="desk_img center_img_2" src="./images/scene1/scena1_center2.png" alt=""><br/>
                        <img class="desk_img center_img_3" src="./images/scene1/scena1_center3.png" alt="">
                    </p>
                    <p>
                        <br />
                        <img class="mobile_img" src="./images/scene1/scena1_center4.png" alt=""><br/>
                        <img class="mobile_img" src="./images/scene1/scena1_center5.png" alt="">
                    </p>
                </div>
            </div>
            <div class="controls">
                <div>Scroll Down</div>
                <div class="icons">
                    <img src="./images/scene1/icon_keyboard.png">
                </div>
            </div>
        </div>
        <!-- 主体 第一块内容 end -->
        <!-- 主体 第二块内容 start -->
        <div class="scene scene2">
            <div class="middle_box"></div>
            <img class="light" src="./images/scene2/ligth_purple.png" alt="">
            <div class="step" style="display:block;">
                <div class="center_align_1 scene2_1">
                    <div class="center_align_2">
                        <p>
                            <img class="scene2_img_1" src="./images/scene2/step1/step_1.png" alt="">
                            <br/>
                            <img class="scene2_img_2" src="./images/scene2/step1/step_2.png" alt="">
                            <br/>
                            <img class="scene2_img_3" src="./images/scene2/step1/step_3.png" alt="">
                            <br/>
                            <img class="scene2_img_4" src="./images/scene2/step1/step_4.png" alt="">
                        </p>
                    </div>
                </div>
            </div>
            <div class="step">
                <div class="center_align_1 scene2_2">
                    <div class="center_align_2 left">
                        <img src="./images/scene2/step2/step_l.gif" alt="">
                    </div>
                    <div class="center_align_2 right">
                        <p>
                            <img class="" src="./images/scene2/step2/step_1.png" alt="">
                            <br/>
                            <img class="mt15" src="./images/scene2/step2/step_2.png" alt="">
                            <br/>
                            <img class="mt40" src="./images/scene2/step2/step_3.png" alt="">
                        </p>
                    </div>
                </div>
            </div>
            <div class="step">
                <div class="center_align_1 scene2_3">
                    <div class="center_align_2 left">
                        <img src="./images/scene2/step3/step_l.gif" alt="">
                    </div>
                    <div class="center_align_2 right">
                        <p>
                            <img class="" src="./images/scene2/step3/step_1.png" alt="">
                            <br/>
                            <img class="mt15" src="./images/scene2/step3/step_2.png" alt="">
                            <br/>
                            <img class="mt40" src="./images/scene2/step3/step_3.png" alt="">
                        </p>
                    </div>
                </div>
            </div>
            <div class="step">
                <div class="center_align_1 scene2_4">
                    <div class="center_align_2 left">
                        <img src="./images/scene2/step4/step_l.png" alt="">
                    </div>
                    <div class="center_align_2 right">
                        <p>
                            <img class="" src="./images/scene2/step4/step_1.png" alt="">
                            <br/>
                            <img class="mt15" src="./images/scene2/step4/step_2.png" alt="">
                            <br/>
                            <img class="mt40" src="./images/scene2/step4/step_3.png" alt="">
                        </p>
                    </div>
                </div>
            </div>
            <div class="points">
                <div class="point point0 selected">
                    <div class="text">Symptoms?</div>
                    <div class="point_icon"></div>
                </div>
                <div class="point point1">
                    <div class="text">No Results</div>
                    <div class="point_icon"></div>
                </div>
                <div class="point point2">
                    <div class="text">Bored</div>
                    <div class="point_icon"></div>
                </div>
                <div class="point point3">
                    <div class="text">Confused</div>
                    <div class="point_icon"></div>
                </div>
            </div>
        </div>
        <!-- 主体 第二块内容 end -->
        <!-- 主体 第三块内容 start -->
        <div class="scene scene3">
            <div class="middle_box"></div>
            <img class="light" src="./images/scene3/ligth_orange.png" alt="">
            <div class="step step3_1">
                <div class="center_align_1">
                    <div class="center_align_2">
                        <p>
                            <img class="" src="./images/scene3/step_1.png" alt="">
                            <br/>
                            <img class="mt32" src="./images/scene3/step_2.png" alt="">
                            <br/>
                            <img class="mt15" src="./images/scene3/step_3.png" alt="">
                        </p>
                    </div>
                </div>
            </div>
            <div class="step step3_2">
                <div class="center_align_1">
                    <div class="center_align_2">
                        <p>
                            <img class="" src="./images/scene3/step_4.png" alt="">
                            <br/>
                            <img class="mt32" src="./images/scene3/step_5.png" alt="">
                            <br/>
                            <img class="mt15" src="./images/scene3/step_6.png" alt="">
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 主体 第三块内容 end -->
        <!-- 主体 第四块内容 start -->
        <div class="scene scene4">
            <div class="item">
                <div class="center_align_1">
                    <div class="center_align_2">
                        <p>
                            <img class="" src="./images/scene4/icon1_1.png" alt="">
                            <br/>
                            <img class="mt30" src="./images/scene4/icon1_2.png" alt="">
                            <br/>
                            <img class="mt40" src="./images/scene4/icon1_3.png" alt="">
                        </p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="center_align_1">
                    <div class="center_align_2">
                        <p>
                            <img class="" src="./images/scene4/icon2_1.png" alt="">
                            <br/>
                            <img class="mt30" src="./images/scene4/icon2_2.png" alt="">
                            <br/>
                            <img class="mt40" src="./images/scene4/icon2_3.png" alt="">
                        </p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="center_align_1">
                    <div class="center_align_2">
                        <p>
                            <img class="" src="./images/scene4/icon3_1.png" alt="">
                            <br/>
                            <img class="mt30" src="./images/scene4/icon3_2.png" alt="">
                            <br/>
                            <img class="mt40" src="./images/scene4/icon3_3.png" alt="">
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 主体 第四块内容 end -->
        <!-- 主体 第五块内容 start -->
        <div class="scene scene5">
            <div class="middle_box"></div>
            <img class="light" src="./images/scene1/ligth_green.png" alt="">
            <img class="scene5_img" src="./images/scene5/scene5_1.png" >
            <div class="area_content">
                <div class="center_align_1">
                    <div class="center_align_2">
                        <img class="" src="./images/scene5/scene5_2.png" alt="">
                        <a class="button1">
                            <div class="state1"><span>Start diagnosis for $100</span></div>
                            <div class="state2"><span>Start diagnosis for $100</span></div>
                        </a>
                        <div class="lines"></div>
                        <img class="" src="./images/scene5/scene5_3.png" alt="">
                        <div class="buttons">
                            <a class="button2 link" href="en/the-team" >
                                <div class="state1" >
                                    <div class="tex_small">Meet</div>
                                    <div>The team</div>
                                </div>
                                <div class="state2" >
                                    <div class="tex_small">Meet</div>
                                    <div>The team</div>
                                </div>
                            </a>
                            <a class="button2 link" href="en/the-team" >
                                <div class="state1" >
                                    <div class="tex_small">Meet</div>
                                    <div>The team</div>
                                </div>
                                <div class="state2" >
                                    <div class="tex_small">Meet</div>
                                    <div>The team</div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 主体 第五块内容 end -->
        <!-- footer部分 start -->
        <div class="footer">
            <div class="principal">
                <div class="middle_box"></div>
                <div class="content">
                    <p class="font_latoblack">DO YOU HAVE ANY DOUBTS?</p>
                    <p class="font_latoregular">Contact us at:</p>
                    <p class="font_email"><span style="font-size: 20px;">
                    	<a href="mailto:contact@diagnosite.com">contact<span style="color: #4bc585;">@</span>diagnosite.com</a></span>
                    </p>
                </div>
            </div>
            <div class="other">
                <div class="middle_box"></div>
                <div class="center">
                    <p>All rights reserved to diagno<span style="color: #4cc586;">site</span> 2014</p>
                </div>
                <div class="left">
                    <img src="./images/logo_footer.png">
                </div>
                <div class="right">
                    <span>A product by</span>
                    <a href="http://fixedagency.com/" target="_blank"><img class="logo_fixed" src="./images/logo_footer2.png"></a>
                </div>
            </div>
        </div>
        <!-- footer部分 end -->
    </div>
    <!-- 主体部分 end-->
</body>

</html>
